import React from 'react'
import styles from './index.less'
import { Row, Col, Button,Form, Input, Icon,Select } from 'antd'
import {format} from '../../utils'
import driverLogo from '../../../assets/driverLogo.png'
const FormItem = Form.Item;
const { TextArea } = Input;
const Option = Select.Option;
const formItemLayout = {
  labelCol: {
    span: 24,
  },
  wrapperCol: {
    xs:24,
    sm:16,
  },
}
class add extends React.Component {
    render() {
        const {onAdd} = this.props
        const { getFieldDecorator } = this.props.form;
        const handleSubmit = (e) => {
            e.preventDefault();
            this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                onAdd(values)
            }
            });
        }
    return (
      <div>
        <div className={styles.filterTop}>
            <div className={styles.title}><span style={{marginRight:20}}>添加订单</span>
                <Button type="primary"onClick={handleSubmit}>保存</Button>
            </div>
            <div className={styles.Searchright}>
            </div>
        </div>
        <div className={styles.listbox}>
            <Form onSubmit={handleSubmit} className="login-form" >
                <Row>
                    <Col sm={24} lg={12} xl={8}>
                        <FormItem {...formItemLayout} label="收货人">
                        {getFieldDecorator('consigneeName', {
                            rules: [{ required: true, message: '请输入收货人姓名!' }],
                        })(
                            <Input placeholder="收货人" />
                        )}
                        </FormItem>
                        <FormItem {...formItemLayout} label="收货人联系方式 ">
                        {getFieldDecorator('consigneeMobile', {
                            rules: [{ required: true, message: '请输入收货人联系方式!' }],
                        })(
                            <Input placeholder="收货人联系方式" />
                        )}
                        </FormItem>
                        <FormItem {...formItemLayout} label="目的地区">
                        {getFieldDecorator('endDistrict', {
                            rules: [{ required: true, message: '请输入目的地区!' }],
                        })(
                            <Input placeholder="请输入目的地区" />
                        )}
                        </FormItem>
                        <FormItem {...formItemLayout} label="体积">
                        {getFieldDecorator('volume', {
                            rules: [{ required: true, message: '请输入体积!' }],
                        })(
                            <Input placeholder="请输入体积" />
                        )}
                        </FormItem>
                        <FormItem {...formItemLayout} label="重量">
                        {getFieldDecorator('weight', {
                            rules: [{ required: true, message: '请输入重量!' }],
                        })(
                            <Input placeholder="请输入重量" />
                        )}
                        </FormItem>
                        <FormItem {...formItemLayout} label="货物数量 ">
                        {getFieldDecorator('goodsCount', {
                            rules: [{ required: true, message: '请输入货物数量 !' }],
                        })(
                            <Input placeholder="请输入货物数量" />
                        )}
                        </FormItem>
                    </Col>
                    <Col sm={24} lg={12} xl={8}>
                        <FormItem {...formItemLayout} label="发布人姓名">
                        {getFieldDecorator('releasersName', {
                            rules: [{ required: true, message: '请输入发布人姓名!' }],
                        })(
                            <Input placeholder="收货人" />
                        )}
                        </FormItem>
                        <FormItem {...formItemLayout} label="发布人手机号码 ">
                        {getFieldDecorator('releasersMobile', {
                            rules: [{ required: true, message: '请输入发布人手机号码!' }],
                        })(
                            <Input placeholder="请输入发布人手机号码" />
                        )}
                        </FormItem>
                        <FormItem {...formItemLayout} label="出发地区">
                        {getFieldDecorator('startDistrict', {
                            rules: [{ required: true, message: '请输入出发地区!' }],
                        })(
                            <Input placeholder="请输入出发地区" />
                        )}
                        </FormItem>
                        <FormItem {...formItemLayout} label="预估价 ">
                        {getFieldDecorator('price', {
                            rules: [{ required: true, message: '请输入预估价!' }],
                        })(
                            <Input placeholder="请输入预估价" />
                        )}
                        </FormItem>
                        <FormItem {...formItemLayout} label="备注 ">
                        {getFieldDecorator('description', {
                            rules: [{ required: true, message: '请输入备注!' }],
                        })(
                            <TextArea rows={4} placeholder="请输入备注" />
                        )}
                        </FormItem>
                        <FormItem {...formItemLayout} label="期待车型">
                        {getFieldDecorator('truckType', {
                            rules: [{ required: true, message: '请选择期待车型!' }],
                        })(
                            <Select style={{ width: 120 }}>
                                <Option value="0">小型车</Option>
                                <Option value="5">中型车</Option>
                                <Option value="9">大型车</Option>
                            </Select>
                        )}
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </div>
      </div>
    );
  }
}
export default Form.create()(add)
